<!--
日志列表弹出框组件
@example

    <logDialog
      :api="api.getLogs"
      ref="logDialog"
    ></logDialog>

      logDialog: () => import('@/views/components/logDialog/logDialog.vue')

      openLogDialog(id) {
        this.$refs['logDialog'].triggerOpen(id);
      }

-->
<template>
    <div>
        <el-table
                v-loading="logs.loading"
                :data="logs.dataList"
                border
                key="loglisttable"
        >
            <el-table-column label="编号" width="65" align="center" prop="id" />
            <el-table-column
                    label="操作人"
                    width="110"
                    align="center"
                    prop="operator"
            />
            <el-table-column label="操作内容" align="left" prop="content" />
            <el-table-column
                    label="操作时间"
                    align="center"
                    prop="operatorTime"
                    width="180"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row&&scope.row.operatorTime">{{ scope.row.operatorTime }}</span>
                </template>
            </el-table-column>
        </el-table>
        
        <el-pagination
                key="loglistpage"
                 style="margin-top:10px;"
                v-show="logs.total > 0"
                :total="logs.total"
                :page.sync="logs.queryParams.pageNum"
                :limit.sync="logs.queryParams.pageSize"
                @pagination="(pageParams)=>{logs.queryParams={...logs.queryParams,...pageParams};_getLogsList($data.logs.queryParams.infoId)}"
        />
    </div>
</template>
<script>
  const INIT_LOG_DATA = {
    loading: false,
    dataList: [],
    total: 0,
    queryParams: {
      infoId: '',
      pageNum: 0,
      pageSize: 10,
    },
  };
  export default {
    props: {
      visible: {
        type: Boolean,
        require: false,
      },
    },
    data() {
      return {
        logs: JSON.parse(JSON.stringify(INIT_LOG_DATA)),
        //参数来自于调用者
        $_options: {
          id: '',
          api() {
          },
          success() {
          },
        },
        api:undefined
      };
    },
    methods: {
      setOptions(options) {
        this.$data.$_options = options;
      },
      /**
       * @description:
       * @params _data.id
       * @params _data.api
       * @return
       */
      initByDialog(_data) {
        if (!(_data&&_data.id)) {
          this.msgError('请先选择要查询的数据');
          return;
        }
        this.api=_data&&_data.api
        
        this._getLogsList(_data&&_data.id);
      },
      remove() {
        document.body.removeChild(this.$el);
        this.$destroy();
      },
      _openDialog() {
        this.$data.logs.open = true;
        return this;
      },
      
      _finallyEvent() {
        this.$data.logs = JSON.parse(JSON.stringify(INIT_LOG_DATA));
      },
      _cancelEvent() {
        this.$emit('update:visible', false);
        this.$emit('cancel');
        
        this._finallyEvent();
        
      },
      _successEvent() {
        this.$emit('success');
        
        this.$_options &&
        this.$_options.success &&
        this.$_options.success.call(this, this);
        
      },
      _closeEvent() {
        this.$emit('update:visible', false);
        
        this.remove();
        this._finallyEvent();
      },
      _getLogsList(id) {
        this.$data.logs.queryParams.infoId = id;
        this.$data.logs.open = true;
        this.$data.logs.loading = true;
        this.$data.api(this.$data.logs.queryParams).then(response => {
          this.$data.logs.dataList = response.data;
          this.$data.logs.total = response.count;
          this.$data.logs.loading = false;
        });
      },
    },
  };
</script>
